<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冰墩墩</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body,
        html {
            padding: 0;
            margin: 0;
            font-size: 199px;
        }

        #bingDD {
            position: relative;
            margin-left: 1rem;
            margin-top: 0.5rem;
            height: 3.4rem;
            width: 3rem;
        }

        .body {

            border: 0.06rem solid #000;
            height: 100%;
            width: 100%;
            position: absolute;
            border-radius: 55% 55% 55% 55% / 50% 50% 60% 60%;
            top: 0;
            left: 0;
            background: #fff;
            z-index: 1;
        }

        .ear {
            width: 0.9rem;
            height: 1.2rem;
            position: absolute;
            top: 0;
            left: 0.2rem;
            border: 0.06rem solid #000;
            border-radius: 50% 60% 60% 50% /50% 50% 50% 50%;
            background-color: white;
            z-index: 0;
            transform: rotate(-20deg);
        }

        .ear::after {
            position: absolute;
            content: "";
            width: 0.9rem;
            height: 1.2rem;
            top: 0.07 rem;
            left: 0.02rem;
            border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
            background: #000;
            z-index: 0;
            transform: rotate(-20deg);

        }

        .rightEar {
            right: 0.2rem;
            left: auto;
            transform: rotateY(180deg) rotate(-20deg);
        }

        .circle1,
        .circle2,
        .circle3,
        .circle4,
        .circle5 {
            border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
            position: absolute;
            z-index: 1;
        }

        .circle1 {
            width: 2.2rem;
            height: 1.7rem;
            border: 0.05rem solid #000;
            top: 0.45rem;
            left: 0.4rem;
        }

        .circle2 {
            width: 2.28rem;
            height: 1.78rem;
            border: 0.04rem solid #335fe6;
            top: 0.41rem;
            left: 0.36rem;
        }

        .circle3 {
            width: 2.34rem;
            height: 1.84rem;
            border: 0.03rem solid #ee39d3;
            top: 0.38rem;
            left: 0.33rem;
        }

        .circle4 {
            width: 2.38rem;
            height: 1.86rem;
            border: 0.02rem solid #edf466;
            top: 0.36rem;
            left: 0.31rem;
        }

        .circle5 {
            width: 2.4rem;
            height: 1.88rem;
            border-color: #6cf07b;
            top: 0.38rem;
            left: 0.33rem;
        }

        .leftHand {
            position: absolute;
            z-index: 0;
            width: 0.8rem;
            height: 1.3rem;
            border-radius: 50%;
            background: #000;
            top: 1rem;
            left: -0.5rem;
            transform: rotate(-15deg);
        }

        .leftHand::after {
            position: absolute;
            content: "";
            width: 1.3rem;
            height: 0.8rem;
            background: #000;
            border-radius: 50%;
            transform: rotate(35deg);
            top: 0.71rem;
        }

        .rightHand {
            position: absolute;
            z-index: 0;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            background: #000;
            top: 2.2rem;
            right: -0.5rem;
        }

        .rightHand::after {
            position: absolute;
            content: "";
            width: 0.8rem;
            height: 0.8rem;
            background: #000;
            border-radius: 0 0 0 80%;
            transform: rotate(-47deg);
            top: -0.24rem;
            left: -0.26rem;
        }

        .leftFoot {
            position: absolute;
            background: #000;
            width: 0.9rem;
            height: 0.9rem;
            top: 3rem;
            left: 0.3rem;
            border-radius: 50%;
        }

        .leftFoot::after {
            position: absolute;
            z-index: 0;
            height: 0.9rem;
            width: 0.9rem;
            content: "";
            background: #000;
            top: -0.45rem;
            transform: rotate(12deg);
            left: 0.1rem;
            border-radius: 0 50% 50% 0;
        }

        .leftFoot::after {
            position: absolute;
            z-index: 0;
            height: 0.9rem;
            width: 0.9rem;
            content: "";
            background: #000;
            top: -0.45rem;
            transform: rotate(12deg);
            left: 0.1rem;
            border-radius: 0 50% 50% 0;
        }

        .rightFoot {
            position: absolute;
            background: #000;
            width: 0.9rem;
            height: 0.9rem;
            top: 3rem;
            right: 0.3rem;
            border-radius: 50%;

        }

        .rightFoot::after {
            position: absolute;
            z-index: 0;
            height: 0.9rem;
            width: 0.9rem;
            content: "";
            background: #000;
            top: -0.45rem;
            transform: rotate(-12deg);
            right: 0.1rem;
            border-radius: 0 0 0 50%;
        }

        .leftEye {
            position: absolute;
            width: 0.6rem;
            height: 0.8rem;
            top: 0.8rem;
            left: 0.65rem;
            background: #000;
            z-index: 2;
            border-radius: 50%;
            transform: rotate(45deg);
        }

        .leftEye::after,
        .rightEye::after {
            position: absolute;
            width: 0.3rem;
            height: 0.3rem;
            border: 0.03rem solid #fff;
            border-radius: 50%;
            content: "";
            top: 0.1rem;
            left: 0.15rem;
        }

        .rightEye::after {
            left: auto;
            right: 0.15rem;
        }

        .leftEye::before,
        .rightEye::before {
            top: 0.23 rem;
            left: 0.22rem;
            position: absolute;
            width: 0.1rem;
            height: 0.1rem;
            background: #fff;
            border-radius: 50%;
            content: "";
        }

        .rightEye::before {
            left: 0.22rem;
            top: 0.18 rem;
        }

        .rightEye {
            position: absolute;
            width: 0.6rem;
            height: 0.8rem;
            top: 0.8rem;
            right: 0.65rem;
            background: #000;
            z-index: 2;
            border-radius: 50%;
            transform: rotate(-45deg);
        }

        .mouse {
            border: 0.05rem solid #000;
            position: absolute;
            top: 1.3rem;
            width: 1rem;
            height: 0.5rem;
            z-index: 1;
            left: 50%;
            margin-left: -0.5rem;
            border-radius: 0 0 50% 50% /0 0 100% 100%;
            border-top: none;
        }

        .mouse::after,
        .mouse::before {
            position: absolute;
            content: "";
            width: 0.5rem;
            background:
                #fff;
            height: 0.5rem;
            top: -0.15rem;
            transform: rotate(45deg);
        }

        .mouse::after {
            left: -0.21rem;
        }

        .mouse::before {
            right: -0.21rem;
        }

        .mouseDot {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        .mouseDot::after,
        .mouseDot::before {
            position: absolute;
            top: 0.333rem;
            width: 0.05rem;
            height: 0.05rem;
            border-radius: 50%;
            background: #000;
            content: "";
        }

        .mouseDot::after {
            left: 0.113rem;
        }

        .mouseDot::before {
            left: 0.113rem;
        }

        .nose {
            background: #000;
            width: 0.3rem;
            height: 0.3rem;
            position: absolute;
            left: 50%;
            margin-left: -0.15rem;
            top: 1.25rem;
            z-index: 1;
            transform: rotate(50deg) skewY(-10deg);
            border-radius: 30%;
        }

        .nose::after {
            width: 0.352rem;
            height: 0.36rem;
            position: absolute;
            content: "";
            border-radius: 50%;
            border-top: 0.1rem solid #fff;
            top: -0.07rem;
            transform: rotate(-45deg) skewY(0deg);
            left: -0.017rem;
        }

        .heartL {
            width: 0.5rem;
            height: 0.5rem;
            position: absolute;
            top: 1.25rem;
            left: -0.32rem;
            z-index: 2;
        }

        .heartL::before,
        .heartL::after {
            content: "";
            position: absolute;
            width: 0.12rem;
            height: 0.2rem;
            background-color: red;
            border-radius: 0.2rem 0.2rem 0 0;
            top: 0;
        }

        .heartL::before {
            left: 0;
            transform: rotate(-45deg);
        }

        .heartL::after {
            transform: rotate(45deg);
            right: 0.32rem;
        }

        .heartR {
            width: 0.5rem;
            height: 0.5rem;
            position: absolute;
            top: 2.4rem;
            left: 2.7rem;
            z-index: 2;
            transform: rotate(136deg);
        }

        .heartR::before,
        .heartR::after {
            content: "";
            position: absolute;
            width: 0.12rem;
            height: 0.2rem;
            background-color: red;
            border-radius: 0.2rem 0.2rem 0 0;
            top: 0;
        }

        .heartR::before {
            transform: rotate(-45deg);
            left: 0;
        }

        .heartR::after {
            transform: rotate(45deg);
            right: 0.32rem;
        }

        .logo {
            background-image: url(bdd.jpg);
            background-repeat: no-repeat;
            width: 200px;
            position: absolute;
            height: 200px;
            z-index: 2;
            background-size: contain;
            top: 2.35rem;
            left: 35%;
        }
    </style>
</head>

<body>
    <div id="bingDD">
        <div class="body"></div>
        <div class="ear"></div>
        <div class="ear rightEar"></div>
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
        <div class="circle5"></div>
        <div class="leftHand"></div>
        <div class="rightHand"></div>
        <div class="leftFoot"></div>
        <div class="rightFoot"></div>
        <div class="leftEye"></div>
        <div class="rightEye"></div>
        <div class="mouse">
            <div class="mouseDot">
            </div>
        </div>
        <div class="nose"></div>
        <div class="heartL"></div>
        <div class="heartR"></div>
        <div class="logo"></div>
    </div>
</body>

</html>